/*
 * @name: 中奖核销弹窗
 * @Author: along
 * @Date: 2020-06-10
 */
<template>
    <el-dialog
        :visible.sync="dialogShop"
        :close-on-click-modal="false"
        width="1000px"
    >
        <div class="container luckCheck">
            <!-- header -->
            <div class="header-nav">
                <div class="header-left">
                    <div class="header-new-box">
                        <p class="header-new-box-title">中奖编号:</p>
                        <el-input
                            v-model="lottery_no"
                            placeholder="请输入中奖编号"
                            size="small"
                            clearable
                            @keyup.native.enter="getTableData(1)"
                        />
                    </div>
                </div>
            </div>
            <!-- /header -->

            <!-- table -->
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;max-height:500px"
                border
                ref="luckCheck"
            >
                <el-table-column
                    prop="true_name"
                    label="中奖用户姓名"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                />
                <el-table-column
                    prop="phone"
                    label="手机号"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                />
                <el-table-column
                    prop="create_time"
                    label="中奖时间"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="中奖状态"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <p v-if="scope.row.status == 0">去兑奖</p>
                        <p v-if="scope.row.status == -1">已失效</p>
                        <p v-if="scope.row.status == 1">已兑奖</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            :type="scope.row.status == 1 ? 'info' : 'primary'"
                            class="curse-add"
                            @click="fnConfirm(scope.row)"
                            size="small"
                            :disabled="scope.row.status == 1"
                        >
                            核销兑奖
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- foot -->
            <div class="zd-foot">
                <el-button
                    type="info"
                    size="small"
                    style="width:100px"
                    @click="()=>{
                        dialogShop = false;
                    }"
                >
                    关闭
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    style="margin-left:30px;width:100px"
                    @click="getTableData(1)"
                >
                    搜索
                </el-button>
            </div>
        </div>
    </el-dialog>

</template>

<script>
import { back } from '@/mixin/back';
export default {
    mixins: [back],
    components: {},
    data () {
        return {
            lottery_no: '',
            tableData: [],
            dialogShop: false,
            exchange_no: ''
        };
    },
    filters: {},
    computed: {},
    watch: {
        dialogShop (val) {
            if(!val) {
                this.tableData = [];
                this.lottery_no = '';
            }
        }
    },
    mounted () {
    },
    methods: {
        /**
         * 打开弹窗
         */
        showDialog () {
            this.dialogShop = true;
        },

        /**
         * 获取表格数据
         */
        getTableData () {
            if(this.lottery_no == '') {
                this.$notify({
                    title: '提示',
                    message: '中奖编号不可以为空',
                    type: 'warning'
                });
                return;
            }

            this.$post('/student/shop_lottery_exchange%5Cget', {
                exchange_no: this.lottery_no
            }, resp => {
                if (resp.code == 1) {
                    this.exchange_no = this.lottery_no;
                    this.tableData = [{
                        student_no: resp.data.student_no,
                        create_time: resp.data.create_time,
                        status: resp.data.status,
                        true_name: resp.data.student_info.true_name,
                        phone: resp.data.student_info.phone
                    }];
                }
            });
        },

        /**
         * 核销兑奖
         */
        fnConfirm (row) {
            this.$confirm('是否确定核销该兑奖，一旦确认则该中奖状态变为已兑奖', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_lottery_exchange%5Cexchange', {
                    exchange_no: this.exchange_no
                }, resp => {
                    if (resp.code == 1) {
                        this.$set(row,'status',1);
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            });
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #fff;
        padding: 10px 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .header-nav {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            .header-left, .header-right {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .header-new-box {
                display: flex;
                margin-right: 15px;
                align-items: center;
                color: #606266;
                margin-bottom: 10px;
                white-space: nowrap;
                &-title {
                    margin-right: 2px;
                    white-space: nowrap;
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
    .el-button-left {
        margin-left: 40px;
    }
    .el-button-right {
        margin-right: 10px;
    }
    .zd-goods {
        display: flex;
        align-content: center;
        height: 40px;
        &-cover {
            width: 40px;
            height: 40px;
        }
        &-title {
            font-size: 14px;
            color: #333;
            margin-left: 8px;
            white-space: nowrap;
            height: 40px;
            line-height: 40px;
        }
    }
    .zd-foot {
        width: 100%;
        height: 32px;
        display: flex;
        justify-content: center;
        margin-top: 25px;
    }
</style>
<style lang="less">
    .luckCheck{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
    }
</style>